<!-- 失物招领 -->
<template>
  <div class="store">
    <myheader title="添加店铺" rightBtn="主页" @updataInfo="submitRecruit"></myheader>
    <el-upload
      ref="upload"
      class="upload-demo"
      drag
      list-type="picture"
      action="#"
      :on-change="beforeAvatarUpload"
      @abort="cancel"
      :auto-upload="false"
    >
      <i class="el-icon-upload" />
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过5M</div>
      <div class="el-upload__tip" slot="tip">必须要上传一张图片才能提交哟</div>
    </el-upload>

    <van-form class="lostInfo">
      <van-cell-group inset>
        <van-field v-model="store.name" label="店铺名称" placeholder="请输入店铺名称" />
        <van-field
          v-model="projectId"
          @click="open"
          name="address"
          label="店铺类型"
          placeholder="店铺的类型"
        ></van-field>

        <van-field v-model="store.profile" label="店铺信息" placeholder="请描店铺的详细信息" />
        <van-field v-model="store.address" label="店铺地址" placeholder="店铺的地址" />
      </van-cell-group>

      <el-button style="margin: 3vh 5vw;" size="small" type="primary" @click="upload">提交</el-button>
    </van-form>
    <van-action-sheet
      title="请选择店铺类型"
      :show="showSheet"
      :actions="actions"
      cancel-text="取消"
      :close-on-click-action="true"
      @cancel="showSheet =false"
      @select="select"
    />
  </div>
</template>

<script>
import { Notify } from 'vant'
import myheader from '../../../comon/myheader.vue'

export default {
  components: {
    myheader,
  },
  data() {
    return {
      store: {
        name: '',
        type: '',
        profile: '',
        address: '',
        userId: this.$store.getters.getUserInfo.id.toString(),
      },
      showSheet: false,
      flag: false,
      actions: [{ name: '烧烤店' }, { name: '水果店' }, { name: '超市' }], // 选项列表
      projectId: '',
      fileList: [],
    }
  },
  methods: {
    // 选项列表
    open() {
      this.showSheet = !this.showSheet
    },
    // 选择大额选项
    select(actiocns, index) {
      this.projectId = this.actions[index].name
      let num = index + 1
      this.store.type = num
      this.showSheet = !this.showSheet
      console.log(this.store.type)
    },

    // 上传文件前预校验
    beforeAvatarUpload(file) {
      const FileExt = file.name.replace(/.+\./, '')
      const isJPG = !(['jpg', 'png'].indexOf(FileExt.toLowerCase()) === -1)
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!isJPG) {
        Notify({
          type: 'danger',
          message: '上传头像图片只能是 JPG / png 格式!',
        })
      } else if (!isLt2M) {
        Notify({ type: 'danger', message: '上传头像图片大小不能超过 5M!' })
      } else {
        this.flag = true
      }
      return isJPG && isLt2M
    },
    // 	取消上传
    cancel() {
      this.flag = false
    },
    upload() {
      if (this.store.name == '') {
        Notify({ type: 'warning', message: '请填写店铺名称' })
        return
      } else if (this.store.profile == '') {
        Notify({ type: 'warning', message: '请描店铺的详细信息' })
        return
      } else if (this.store.type == '') {
        Notify({ type: 'warning', message: '请填写店铺的类型' })
        return
      } else if (this.store.address == '') {
        Notify({ type: 'warning', message: '请填写店铺的地址' })
        return
      } else if (!this.flag) {
        Notify({ type: 'warning', message: '至少要上传一张图片' })
        return
      } else {
        this.fileList = this.$refs.upload.uploadFiles
        let formData = new FormData()

        for (
          let index = 0;
          index < this.$refs.upload.uploadFiles.length;
          index++
        ) {
          formData.append('imgFiles', this.$refs.upload.uploadFiles[index].raw)
        }

        formData.append(
          'shop',
          new Blob([JSON.stringify(this.store)], {
            type: 'application/json',
          })
        )

        this.$axios
          .post('/shop/save', formData, {
            headers: { 'Content-Type': 'multipart/form-data' },
          })
          .then((res) => {
            if (res.data.code == 200) {
              Notify({ type: 'success', message: '提交成功！' })
              this.$router.push('/stores')
            }
          })
          .catch(() => {})
      }
    },
    submitRecruit() {
      this.$router.push('/home')
    },
  },
}
</script>
 
 <style   scoped>
.store {
  margin-top: 46px;
}
.lostInfo {
  width: 90vw;
  margin-left: 5vw;
}
</style>